import React from 'react'
import styles from './Task.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrashCan, faCheck } from '@fortawesome/free-solid-svg-icons'

const Task = props => {
	const [task, setTask] = React.useState(props.task)

	let add_class = ''
	let add_button = ''
	if (task.done) {
		add_class = ` ${styles.deactivate}`
		add_button = ` ${styles.visible}`
	}

	return (
		<div className={styles.wrapper}>
			<div
				onClick={() => {
					setTask({ ...task, done: !task.done })
				}}
				className={styles.button}
			>
				<FontAwesomeIcon icon={faCheck} className={styles.done + add_button} />
			</div>
			<p className={styles.text + add_class}>{task.text}</p>
			<FontAwesomeIcon
				className={styles.trash}
				onClick={() => {
					props.delete(task.id)
				}}
				icon={faTrashCan}
			/>
		</div>
	)
}
export default Task
